<template>
	<view class="box bg_f2">
		<view class="content hidden">
			<view class="top bg_ff6a00">
				<view>
					<view class="font_35 color_fff text_bold" v-if="detail_info.status == 1">
						待用户在{{detail_info.start_}}将行李寄存到本店</view>
					<view class="font_35 color_fff text_bold" v-if="detail_info.status == 2">
						待用户在{{detail_info.end_}} 24:00前将行李取出</view>
					<view class="font_35 color_fff text_bold" v-if="detail_info.status == 3">已完成</view>
					<view class="font_35 color_fff text_bold" v-if="detail_info.status == 4">已取消</view>
					<view class="flex7" style="margin-top: 31rpx;"
						v-if="detail_info.status == 1 || detail_info.status == 2">
						<view class="flex3" style="margin-right: 8rpx;">
							<van-icon name="clock-o" size="16" color="#fff" custom-style="font-weight: bold;" />
						</view>
						<view class="font_27 color_fff">{{time_num}}</view>
					</view>
				</view>
			</view>
			<view class="wrapper bg_fff">
				<view class="flex3 user_wrapper">
					<image :src="detail_info.members.avatar" mode="aspectFill"></image>
					<view class="font_31 w_flex1" style="overflow: hidden;">
						<view>{{detail_info.members.nickname}}</view>
						<view class="detail_m1">{{detail_info.members.mobile}}</view>
					</view>
					<view class="phone_wrapper flex2">
						<view class="font_31 text_bold color_ff6a00" @click="get_phone(detail_info.members.mobile)">拨打电话
						</view>
					</view>
				</view>
			</view>
			<view class="wrapper bg_fff">
				<view class="hidden">
					<view class="title flex3">
						<view></view>
						<view class="font_35 text_bold">用户信息</view>
					</view>
					<view class="font_31 color_7b text_wrapper">
						<view class="text_list flex8">
							<view>寄存时间：</view>
							<view>{{detail_info.start_time}}~{{detail_info.end_time}}</view>
						</view>
						<view class="text_list flex8">
							<view>行李箱：</view>
							<view>{{detail_info.trunk_number}}件</view>
						</view>
						<view class="text_list flex8">
							<view>背包：</view>
							<view>{{detail_info.packsack_number}}件</view>
						</view>
						<view class="text_list flex8">
							<view>订单金额：</view>
							<view>{{detail_info.merchants_amount}}元</view>
						</view>
					</view>
				</view>
			</view>
			<view class="wrapper bg_fff">
				<view class="hidden">
					<view class="font_31 color_7b text_wrapper">
						<view class="text_list flex8">
							<view>下单时间：</view>
							<view>{{detail_info.createtime_text}}</view>
						</view>
						<view class="text_list flex8">
							<view>交易单号：</view>
							<view>{{detail_info.transaction_id}}</view>
						</view>
						<view class="text_list flex8">
							<view>订单状态：</view>
							<view>{{detail_info.status_text}}</view>
						</view>
						<view class="text_list flex8">
							<view>订单编号：</view>
							<view>{{detail_info.order_no}}</view>
						</view>
						<view class="text_list flex8" v-if="detail_info.status == 2">
							<view>寄存时间：</view>
							<view>{{detail_info.save_time_text}}</view>
						</view>
						<view class="text_list flex8" v-if="detail_info.status == 3">
							<view>完成时间：</view>
							<view>{{detail_info.collect_time_text}}</view>
						</view>
						<view class="text_list flex8" v-if="detail_info.status == 4">
							<view>取消时间：</view>
							<view>{{detail_info.cancel_time}}</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="foot_wrapper bg_fff van-hairline--top flex9">
			<view class="flex7 font_31 border_7b" @click="get_phone(detail_info.members.mobile)">联系顾客</view>
			<view class="flex7 font_31 border_ff6a00" style="width: 212rpx;" v-if="detail_info.status == 1"
				@click="is_time_show = true;">填写寄存码</view>
			<view class="flex7 font_31 border_ff6a00" style="width: 212rpx;" v-if="detail_info.status == 2"
				@click="is_time_show = true;">填写取件码</view>
		</view>
		<!-- 寄存码 -->
		<van-popup :show="is_time_show">
			<view class="modal_wrapper hidden">
				<view class="modal_top">
					<view class="font_35 text_bold index_m7">
						{{detail_info.status == 1?'请输入用户订单详情里寄存码': '请输入用户订单详情里取件码'}}
					</view>
					<view class="font_31 flex3 van-hairline--bottom">
						<view class="w_flex1 time_block">
							<input :placeholder="detail_info.status == 1?'请输入用户订单中的寄存码': '请输入用户订单中的取件码'"
								v-model="code" />
						</view>
					</view>
				</view>
				<view class="van-hairline--top font_31 modal_foot">
					<view class="van-hairline--right" @click="is_time_show = false;">取消</view>
					<view @click="get_time_sure">确定</view>
				</view>
			</view>
		</van-popup>
	</view>
</template>

<script>
	// status 1-待存放 2-待提取 3-完成 4-取消
	export default {
		data() {
			return {
				id: '',
				code: '',
				is_time_show: false,
				time_num: '', // 时间
				detail_info: {
					members: {

					}
				},
			}
		},
		onLoad(e) {
			this.id = e.id;
			this.getOrdersDetail();
		},
		methods: {
			getOrdersDetail() {
				this.$http.get(this.$api.getOrdersDetail, {
					order_id: this.id
				}).then(res => {
					res.data.start_ = res.data.start_time.substring(5);
					res.data.end_ = res.data.end_time.substring(5);

					this.detail_info = res.data;
					this.get_day_time();
				})
			},
			// 转天 时间 分钟
			get_day_time() {
				let self = this;

				var s1 = new Date(self.detail_info.createtime_text.replace(/-/g, "/")),
					s2 = new Date(),
					runTime = parseInt((s2.getTime() - s1.getTime()) / 1000);
				var year = Math.floor(runTime / 86400 / 365);
				runTime = runTime % (86400 * 365);
				var month = Math.floor(runTime / 86400 / 30);
				runTime = runTime % (86400 * 30);
				var day = Math.floor(runTime / 86400);
				runTime = runTime % 86400;
				var hour = Math.floor(runTime / 3600);
				runTime = runTime % 3600;
				var minute = Math.floor(runTime / 60);
				runTime = runTime % 60;
				var second = runTime;

				if (year) {
					this.time_num = year + '年' + month + '月' + day + '天' + hour + '小时' + minute + '分钟';
				} else if (month) {
					this.time_num = month + '月' + day + '天' + hour + '小时' + minute + '分钟';
				} else if (day) {
					this.time_num = day + '天' + hour + '小时' + minute + '分钟';
				} else if (hour) {
					this.time_num = hour + '小时' + minute + '分钟';
				} else if (minute) {
					this.time_num = minute + '分钟';
				}
			},
			// 拨打电话
			get_phone(e) {
				uni.makePhoneCall({
					phoneNumber: e
				});
			},
			// 寄存/取件
			get_time_sure() {
				if (!this.code) return getApp().get_msg('请输入内容');

				this.is_time_show = false;
				getApp().get_loading();
				if (this.detail_info.status == 1) {
					// 待存件
					this.$http.post(this.$api.ordersConsign, {
						order_id: this.id,
						check_code: this.code
					}).then(res => {
						getApp().get_msg('存件成功');
						getApp().get_back();

						uni.setStorageSync('merchantList', true);
					})
				}

				if (this.detail_info.status == 2) {
					// 待取件
					this.$http.post(this.$api.ordersCollect, {
						order_id: this.id,
						collect_code: this.code
					}).then(res => {
						getApp().get_msg('取件成功');
						getApp().get_back();

						uni.setStorageSync('merchantList', true);
					})
				}
			}
		}
	}
</script>

<style lang="less">
	.box {
		box-sizing: border-box;
		padding: 0 0 134rpx 0;
	}

	.index_m7 {
		margin: 62rpx 0 45rpx;
	}

	.detail_m1 {
		margin: 12rpx 0 0 0;
	}

	.content {
		padding: 0 23rpx;
	}

	.top {
		display: flex;
		margin: 20rpx 0;
		height: 221rpx;
		align-items: center;
		border-radius: 15rpx;
		flex-direction: column;
		justify-content: center;
	}

	.wrapper {
		margin: 20rpx 0;
		border-radius: 15rpx;
	}

	.user_wrapper {
		padding: 31rpx 23rpx;

		image {
			width: 100rpx;
			height: 100rpx;
			border-radius: 50%;
			margin-right: 23rpx;
		}

		.phone_wrapper {
			height: 100rpx;
			margin-left: 50rpx;

			view {
				padding: 10rpx 0 0;
			}
		}
	}

	.title {
		margin: 31rpx 0 4rpx 0;

		view {
			&:first-child {
				width: 4rpx;
				height: 33rpx;
				border-radius: 6rpx;
				margin-right: 19rpx;
				background-color: #EE8332;
			}
		}
	}

	.text_wrapper {
		overflow: hidden;
		padding: 0 23rpx;

		.text_list {
			margin: 23rpx 0;

			&:last-child {
				margin-bottom: 31rpx;
			}

			&:first-child {
				margin-top: 31rpx;
			}
		}
	}

	.foot_wrapper {
		bottom: 0;
		left: 0;
		right: 0;
		padding: 23rpx 7rpx 50rpx;
		position: fixed;
		box-sizing: border-box;

		view,
		navigator {
			width: 169rpx;
			height: 62rpx;
			margin-right: 35rpx;
			border-radius: 55rpx;
			border: 1px solid #fff;
			box-sizing: border-box;

			&.border_7b {
				border-color: #7B7B7B;
			}

			&.border_ff6a00 {
				color: #FF6A00;
				border-color: #FF6A00;
			}
		}
	}

	.box .van-popup--center {
		width: 615rpx;
		border-radius: 23rpx;
	}

	.modal_wrapper {
		text-align: center;

		.time_block {
			padding: 17rpx 0;

			input {
				width: 100%;
			}
		}

		.modal_top {
			padding: 0 46rpx;
		}

		.modal_foot {
			display: flex;
			margin: 60rpx 0 0;

			view {
				flex: 1;
				height: 106rpx;
				display: flex;
				align-items: center;
				justify-content: center;

				&:last-child {
					color: #576B95;
				}
			}
		}
	}
</style>
